import React, { useEffect, useCallback, useMemo } from 'react';
import { connect } from 'react-redux';
import './App.css';
import Header from '../common/Header.js';
import DepartDate from './DepartDate';
import HighSpeed from './HignSpeed';
import Journey from './Journey';
import Submit from './Submit';

import CitySelector from '../common/CitySelector';
import DateSelector from '../common/DateSelector';
import { bindActionCreators } from 'redux';
import {
  exchangeFromTo,
  showCitySelect,
  hideCitySelect,
  fetchCityData,
  setSelectedCity,
  showDateSelect,
  hideDateSelect,
  setDepartDate,
  toggleHighSpeed,
} from './actions';
import { h0 } from '../common/fp';

function App(props) {
  const {
    from,
    to,
    dispatch,
    isCitySelectVisible,
    isDateSelectVisible,
    cityData,
    isLoadingCityData,
    departDate,
    highSpeed,
  } = props;
  const handleResize = (e) => {
    console.log('clientWidth:' + document.documentElement.clientWidth);
    // console.log(document.documentElement.style);
    console.log(getComputedStyle(document.documentElement)['font-size']);
    console.log(getComputedStyle(document.body)['font-size']);
  };
  useEffect(() => {
    window.addEventListener('resize', handleResize, false);
    return () => {
      window.removeEventListener('resize', handleResize, false);
    };
  }, []);
  //使用useCallback 避免重渲染
  const onBack = useCallback(() => {
    window.history.back();
  }, []);

  // 要非常了解bindActionCreator的原理  参数传入一个{ actionTypeA:actionA,actionTypeB:actionB}
  const cbs = useMemo(() => {
    return bindActionCreators({ exchangeFromTo, showCitySelect }, dispatch);
  }, [dispatch]);

  //调用 隐藏城市浮层 的功能
  const citySelectorCbs = useMemo(() => {
    return bindActionCreators(
      {
        onBack: hideCitySelect,
        fetchCityData,
        onSelect: setSelectedCity,
      },
      dispatch
    );
  }, [dispatch]);
  //选择日期浮层显示
  const dapartDateSelectCbs = useMemo(() => {
    return bindActionCreators({ onClick: showDateSelect }, dispatch);
  }, [dispatch]);
  //隐藏日期浮层
  const dateSelectorCbs = useMemo(() => {
    return bindActionCreators({ onBack: hideDateSelect }, dispatch);
  }, [dispatch]);
  //是否选择高铁/动车
  const highSpeedCbs = useMemo(() => {
    return bindActionCreators({ toggle: toggleHighSpeed }, dispatch);
  }, [dispatch]);
  //选择日期
  const selectDate = useCallback(
    (day) => {
      if (!day) return;
      if (day < h0()) return;
      dispatch(setDepartDate(day));
      dispatch(hideDateSelect());
    },
    [dispatch]
  );

  return (
    <div>
      <div className="header-wrapper">
        <Header title="火车票" onBack={onBack} />
      </div>
      <form className="form" action="./query.html">
        <Journey
          from={from}
          to={to}
          {...cbs}
          // exchangeFromTo={() => dispatch(exchangeFromTo())}
          // showCitySelect={(m) => dispatch(showCitySelect(m))}
        />
        <DepartDate time={departDate} {...dapartDateSelectCbs} />
        <HighSpeed {...highSpeedCbs} highSpeed={highSpeed} />
        <Submit />
      </form>
      {/* 是否显示浮层 是否正在加载数据  城市列表数据 */}
      <CitySelector
        // 数据传递方式
        show={isCitySelectVisible}
        isLoading={isLoadingCityData}
        cityData={cityData}
        // 函数传递方式
        {...citySelectorCbs}
      />
      {/* 日期选择浮层 */}
      <DateSelector
        show={isDateSelectVisible}
        {...dateSelectorCbs}
        onSelect={selectDate}
      />
    </div>
  );
}

const mapStateToProps = (state) => {
  return state;
};

const mapDispatchToProps = (dispatch) => {
  return { dispatch };
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
